<template>
    <div>
      <!-- 开始结束 快捷项 -->
      <div v-if="dateModel === 'datetimerange'">
        <el-date-picker
          v-model="dateValue"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
          @change="datePickerChange">
        </el-date-picker>
      </div>
      <!-- 开始结束 没有快捷项 -->
      <div v-if="dateModel === 'moreNoQuick'">
        <el-date-picker
          v-model="dateValue"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
          @change="datePickerChange">
        </el-date-picker>
      </div>
      <!-- 单个日期 快捷项 -->
      <div v-if="dateModel === 'datetime'">
        <el-date-picker
          v-model="dateValue"
          type="datetime"
          placeholder="选择日期时间"
          align="right"
          @change="datePickerChange">
        </el-date-picker>
      </div>
    </div>
</template>
<script>
export default {
  name: 'DatePickerTime',
  props: {
    model: {
      type: String,
      default: ()=> 'datetimerange'
    }
  },
  data() {
    return {
      dateValue: null,
      pickerOptions: {
          shortcuts: [{
            text: '今天',
            onClick: (picker)=> {
              const start = this.$moment().format('YYYY-MM-DD').concat(' 00:00:00')
              const end = this.$moment().format('YYYY-MM-DD HH:mm:ss')
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '本周',
            onClick: (picker)=> {
              const start = this.$moment().clone().subtract(0, 'weeks').startOf('isoWeek').format('YYYY-MM-DD').concat(' 00:00:00')
              const end = this.$moment().format('YYYY-MM-DD HH:mm:ss')
              picker.$emit('pick', [start, end]);
            }
          } ,{
            text: '最近一周',
            onClick: (picker)=> {
              const start = this.$moment().clone().subtract(1, 'weeks').startOf('isoWeek').format('YYYY-MM-DD').concat(' 00:00:00')
              const end = this.$moment().clone().subtract(1, 'weeks').endOf('isoWeek').format('YYYY-MM-DD HH:mm:ss')
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '本月',
            onClick: (picker)=> {
              const start = this.$moment().clone().subtract(0, 'month').startOf('month').format('YYYY-MM-DD').concat(' 00:00:00')
              const end = this.$moment().format('YYYY-MM-DD HH:mm:ss')
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick: (picker)=> {
              const start = this.$moment().clone().subtract(1, 'month').startOf('month').format('YYYY-MM-DD').concat(' 00:00:00')
              const end = this.$moment().clone().subtract(1, 'month').startOf('month').format('YYYY-MM-DD HH:mm:ss')
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick: (picker)=> {
              const start = this.$moment().clone().subtract(3, 'month').startOf('month').format('YYYY-MM-DD').concat(' 00:00:00')
              const end = this.$moment().clone().subtract(1, 'month').startOf('month').format('YYYY-MM-DD HH:mm:ss')
              picker.$emit('pick', [start, end]);
            }
          }]
        }
    }
  },
  computed: {
    dateModel: {
      get() {
        return this.model
      }
    }
  },
  methods: {
    // 控件发生变化
    datePickerChange(e) {
      if(this.dateModel === 'datetimerange') {
        this.$emit('update:startTime', e[0])
        this.$emit('update:endTime', e[1])
      }else if(this.dateModel === 'moreNoQuick') {
        const startTime = this.$moment(e[0]).format('YYYY-MM-DD HH:mm:ss')
        const endTime = this.$moment(e[1]).format('YYYY-MM-DD HH:mm:ss')
        this.$emit('update:startTime', startTime)
        this.$emit('update:endTime', endTime)
      }else if(this.dateModel === 'datetime') {
        const dateTime = this.$moment(e).format('YYYY-MM-DD HH:mm:ss')
        this.$emit('update:currentTime', dateTime)
      }
      this.$emit('change', e)
    }
  }
}
</script>
<style lang="scss" scoped>
</style>